<template>
	<div>
		<div class="header">
			<mu-appbar key="list" style="text-align: center;position:fixed;top:0;left:0;">
			  <span class="iconfont" slot="left">&#xe61d;</span>
			  <span solt="default">最近联系人</span>
			</mu-appbar>
		</div>
		<div class="list">
			<mu-refresh-control :refreshing="vue_refresh.refreshing" :trigger="vue_refresh.trigger" @refresh="vue_refresh_refresh"/>
		  <mu-list ref="list">
		  	<template v-for="(item,index) in vue_listData">
			    <mu-list-item ref="listItem" disableRipple :title="item.userName" to="/chatDetail" :describeText="item.userSay">
			    	<mu-badge v-show="!!item.num" :content="item.num>99?'99+':item.num" class="demo-icon-badge" circle secondary>
			    	</mu-badge>
			      <mu-avatar :src="item.userHead" slot="left"/>
			      <span style="padding-right:10px;" slot="right">{{item.dateTime}}</span>
			    </mu-list-item>
			  	<mu-divider/>
		  	</template>
		  </mu-list>
		  <mu-infinite-scroll :scroller="vue_infinite.scroller" :loading="vue_infinite.loading" @load="vFun_infinite_loadMore"/>
		</div>
	</div>
</template>

<script>
	import IMConfig from '../../assets/js/config'
	
	export default {
		data(){
			return {
				vue_listData:[],  //会话列表vue_listData
				vue_infinite:{
					scroller:null,
					loading:false
				},
				vue_refresh:{
      		trigger: null,
					refreshing: false
				}
			}
		},
		methods:{
			vFun_infinite_loadMore(){  //上拉加载
				this.vue_infinite.loading=true;
				setTimeout(() => {
					this.vue_listData[this.vue_listData.length]={
						userHead:require('../../assets/images/logo1.jpg'),
						userName:'张三4',
						userSay:'下班打球去？',
						dateTime:"16:23:15",
						num:'100',
					};
					this.vue_listData[this.vue_listData.length]={
						userHead:require('../../assets/images/logo1.jpg'),
						userName:'张三5',
						userSay:'下班打球去？',
						dateTime:"16:23:15",
						num:'100',
					};
					this.vue_listData[this.vue_listData.length]={
						userHead:require('../../assets/images/logo1.jpg'),
						userName:'张三6',
						userSay:'下班打球去？',
						dateTime:"16:23:15",
						num:'100',
					};
	        this.vue_infinite.loading = false
	      }, 1000)
			},
			vue_refresh_refresh(){  //下拉刷新
				this.vue_refresh.refreshing = true;
				setTimeout(() => {
					this.vue_listData.unshift({
						userHead:require('../../assets/images/logo1.jpg'),
						userName:'张三1',
						userSay:'下班打球去？',
						dateTime:"16:23:15",
						num:'100',
					});
					this.vue_listData.unshift({
						userHead:require('../../assets/images/logo1.jpg'),
						userName:'张三2',
						userSay:'下班打球去？',
						dateTime:"16:23:15",
						num:'100',
					});
					this.vue_listData.unshift({
						userHead:require('../../assets/images/logo1.jpg'),
						userName:'张三3',
						userSay:'下班打球去？',
						dateTime:"16:23:15",
						num:'100',
					});
	        this.vue_refresh.refreshing = false;
					window.scrollTo(0,3*this.$refs['listItem'][0].$el.clientHeight-20);  
	      }, 1000)
			}
		},
		mounted () {
	    this.vue_infinite.scroller = this.$el.list;
	    this.vue_refresh.trigger = this.$el;
	   // this.RongcloudCommon.login()
	  },
		created(){
			
		var $scope = new Object();
       	$scope.targetType = 1; //1：私聊 
       	var config = {
       		appkey: '3argexb6r934e',
       		token: "b/jvjEFD41TIVT0nsf9+L3ryPPkHsvRwWZV8SVI5ICcZ2I5Nl4OdNO01OjZxjjmVlD2dmk4RZ90=",
       	};
       	
       var msgObj = {
         	type :　 $scope.targetType,
         	targetId : 'bb'
        };
//     	var msgObj = {
//       	type :　 1,
//       	targetId : "bb",
//       	msg :  new RongIMLib.TextMessage({content:"我测试一下发送123",extra:"附加信息"})
//      };
        //var IMConfig = IMConfig.appkey;
        //var $config = config;
        //debugger;
		this.RongcloudCommon.login(config, {
			onSuccess: function(id) {
				$scope.user = id;
				document.title = '用户：' + id;
				console.log('连接成功：' + id);
			},
			onError: function(error) {
				console.log('连接失败：' + error);
			}
		});
		


		this.RongcloudConversation.queryAll(config, {
			onSuccess: function(list) {
			//debugger;
				// list => 会话列表集合。
				//var data = ;
				this.vue_listData = list;
			},
			onError: function(error) {
				// do something...
			}
		});
////		
		//			this.vue_listData = [
//			{
//				userHead:require('../assets/images/logo1.jpg'),
//				userName:'张三',
//				userSay:'下班打球去？',
//				dateTime:"16:23:15",
//				num:'100',
//			},
//			{
//				userHead:require('../assets/images/logo2.jpg'),
//				userName:'李四',
//				userSay:'在吗？',
//				dateTime:"16:23:15",
//				num:'15',
//			},
//			{
//				userHead:require('../assets/images/logo10.jpg'),
//				userName:'张三',
//				userSay:'下班打球去？',
//				dateTime:"16:23:15",
//				num:'0',
//			},
//			{
//				userHead:require('../assets/images/logo11.jpg'),
//				userName:'张三',
//				userSay:'下班打球去？',
//				dateTime:"16:23:15",
//				num:'0',
//			},
//			{
//				userHead:require('../assets/images/logo12.jpg'),
//				userName:'张三',
//				userSay:'下班打球去？',
//				dateTime:"16:23:15",
//				num:'0',
//			},
//			{
//				userHead:require('../assets/images/logo10.jpg'),
//				userName:'张三',
//				userSay:'下班打球去？',
//				dateTime:"16:23:15",
//				num:'0',
//			},
//			{
//				userHead:require('../assets/images/logo11.jpg'),
//				userName:'张三',
//				userSay:'下班打球去？',
//				dateTime:"16:23:15",
//				num:'0',
//			},
//			{
//				userHead:require('../assets/images/logo12.jpg'),
//				userName:'张三',
//				userSay:'下班打球去？',
//				dateTime:"16:23:15",
//				num:'0',
//			},
//			{
//				userHead:require('../assets/images/logo10.jpg'),
//				userName:'张三',
//				userSay:'下班打球去？',
//				dateTime:"16:23:15",
//				num:'0',
//			},
//			{
//				userHead:require('../assets/images/logo11.jpg'),
//				userName:'张三',
//				userSay:'下班打球去？',
//				dateTime:"16:23:15",
//				num:'0',
//			},
//			{
//				userHead:require('../assets/images/logo12.jpg'),
//				userName:'张三',
//				userSay:'下班打球去？',
//				dateTime:"16:23:15",
//				num:'0',
//			}];
		},
	}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
	.header{
		height:56px;
	}
	.demo-icon-badge {
		position:absolute;
		left:40px;
		top:0;
	}
</style>
